<template>
  <view class="YgCell" @tap.stop="jumpToGoodsDetail">
    <view class="img">
      <image
        :lazy-load="true"
        :src="
          goodsObj.goods_small_logo||
          `http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg`
        "
        mode="widthFix"
      />
    </view>
    <view class="content">
      <view class="title">{{ goodsObj.goods_name }}</view>
      <view class="countBox">
        <!-- 显示价格 -->
        <view v-show="price" class="price">{{ goodsObj.goods_price }}</view>
        <!-- 显示数量 如x12 -->
        <view v-show="totalShow&&!price"></view>
        <view v-show="totalShow" class="total">x{{ totalShow }}</view>
        <!--显示 数量加减 -->
        <view v-if="counterShow" class="counter" @tap.stop>
          <view class="minus" @tap.stop="chgCount(-1)">－</view>
          <input v-model="cateList[cateIndex].count" @blur="inpChgCount" />
          <view class="plus" @tap.stop="chgCount(+1)">＋</view>
        </view>
      </view>
    </view>
    <!-- 模态框 -->
    <u-modal
      v-model="modalShow"
      show-cancel-button
      :content="content"
      @confirm="confirm"
      @cancel="cancel"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      modalShow: false, //模态框是否显示
      content: "是否要删除商品？", //模态框提示
      
    };
  },
  props: {
    // 渲染的数据
    goodsObj: {
      type: Object,
      required: true,
    },
    // 是否显示价格 需要传参
    price: {
      type: Boolean,
      default: false,
    },
    // 是否显示右下角数量
    totalShow: {
      type: Number,
      default: 0,
    },
    // 是否显示右下角数量加减组件
    counterShow: {
      type: Boolean,
      default: false,
    },
    // 当前对象所处数组的索引
    cateIndex: {
      type: Number,
    },
  },
  computed: {
    cateList() {
      return this.$store.state.cateList;
    },
  },
  methods: {
    // 跳转到商品详情
    jumpToGoodsDetail() {
      // const url = this.url.split("?")[0];
      // const goods_id = this.url.split("?")[1].split("=")[1];
      // console.log(url);
      this.$u.route(`pages/goods_detail/goods_detail`, {
        goods_id:this.goodsObj.goods_id
      });
    },
    // 加减操作
    chgCount(val) {
      const newCateList = this.cateList;
      if (newCateList[this.cateIndex].count === 1 && val === -1) {
        this.modalShow = true;
      } else {
        newCateList[this.cateIndex].count =
          +newCateList[this.cateIndex].count + val;
        this.$store.commit("changeList", newCateList);
      }
    },
    // input框改变count
    inpChgCount(e) {
      const newCateList = this.cateList;
      if (e.detail.value === "") {
        newCateList[this.cateIndex].count = 1;
        this.$store.commit("changeList", newCateList);
      } else if (e.detail.value == 0) {
        this.modalShow = true;
      } else {
        newCateList[this.cateIndex].count = e.detail.value;
        this.$store.commit("changeList", newCateList);
      }

      console.log(e);
    },
    // 模态框确定
    confirm() {
      const newCateList = this.cateList;
      newCateList.splice(this.cateIndex, 1);
      this.$store.commit("changeList", newCateList);
    },
    // 模态框取消
    cancel() {
      const newCateList = this.cateList;
      newCateList[this.cateIndex].count = 1;
      this.$store.commit("changeList", newCateList);
    },
  },
  
};
</script>

<style lang="scss">
.YgCell {
  padding: 9rpx 26rpx;
  height: 209rpx;
  display: flex;
  box-sizing: border-box;
  .img {
    width: 191rpx;
    image {
      width: 100%;
    }
  }
  .content {
    flex: 1;
    padding: 17rpx 0 27rpx 29rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 24rpx;
      color: #434343;
    }
    .countBox {
      display: flex;
      justify-content: space-between;
      .price {
        color: #ea4350;
        font-size: 24rpx;
        &::before {
          content: "￥";
          font-size: 18rpx;
          color: #ea4350;
        }
      }
      .counter {
        display: flex;
        align-items: center;
        border: 1px solid #d5d5d5;
        .minus,
        .plus {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 40rpx;
          width: 40rpx;
          font-size: 35rpx;
        }
        input {
          width: 80rpx;
          text-align: center;
          border-right: 1px solid #d5d5d5;
          border-left: 1px solid #d5d5d5;
        }
      }
    }
  }
}
</style>